<template>
  <div class="ai-service-container">
    <!-- 左侧导航菜单 -->
    <LeftMenu />

    <!-- 右侧聊天区域 -->
    <div class="main-content">
      <HeaderBar />
      <ChatMessages />
    </div>
    <!-- 右侧工具栏 -->
    <RightMenu />
  </div>
</template>

<script setup>
import LeftMenu from '../components/ai-service/LeftMenu.vue'
import ChatMessages from '../components/ai-service/ChatMessages.vue'
import HeaderBar from '../components/ai-service/HeaderBar.vue'
import RightMenu from '../components/ai-service/RightMenu.vue'
</script>

<style scoped>
.ai-service-container {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
}

.left-menu {
  width: 240px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e6e6e6;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Removed duplicate styles */
</style>